<!-- 设置控编 -->
<template>
  <a-modal
    width="auto"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    title-align="center"
    draggable
  >
    <template #title>
      {{ type === 1 ? '组织控编' : type === 2 ? '职位控编' : '人员类别控编' }}
    </template>
    <div>
      <a-radio-group v-model="formData.controlType" @change="radioChange">
        <a-radio class="radio" :value="1"> 不编控 </a-radio>
        <a-divider />
        <div class="box">
          <a-radio class="radio" ref="radio" :value="2"> 非严格控编 </a-radio>
          <div class="box-right">
            <section>
              <div>控编上限</div>
              <a-input-number
                :disabled="formData.controlType !== 2"
                v-model="formData.nonStrict.percentage"
                style="padding-right: 0; width: 320px"
                placeholder="请输入百分比"
                allow-clear
                :precision="0"
                hide-button
                :min="0"
              >
                <template #suffix>
                  <div class="radioB">%</div>
                </template>
              </a-input-number>
              <div>
                <icon-exclamation-circle-fill style="color: #165dff" />
                例如:定员工人数超过控编120%以上，则无法继续新增员工数量
              </div>
            </section>
            <section>
              <div>控编预警</div>
              <a-input-number
                :disabled="formData.controlType !== 2"
                v-model="formData.nonStrict.warning"
                style="padding-right: 0; width: 320px"
                placeholder="请输入预警值"
                allow-clear
                hide-button
                :precision="0"
                :min="0"
              >
                <template #suffix>
                  <div class="radioA">%</div>
                </template>
              </a-input-number>
            </section>
          </div>
        </div>
        <a-divider />
        <div class="box">
          <a-radio class="radio" :value="3"> 严格控编 </a-radio>
          <div class="box-right">
            <section>
              <div>控编预警</div>
              <a-input-number
                :disabled="formData.controlType !== 3"
                v-model="formData.strict.warning"
                style="padding-right: 0; width: 320px"
                placeholder="请输入百分比"
                allow-clear
                hide-button
                :min="0"
                :precision="0"
              >
                <template #suffix>
                  <div class="radioB">%</div>
                </template>
              </a-input-number>
              <div>
                <icon-exclamation-circle-fill style="color: #165dff" />
                例如:设定员工人数超过控编80%以上，系统则会自动发出预警
              </div>
            </section>
          </div>
        </div>
      </a-radio-group>
    </div>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk" :loading="store.getIsLoading"
        >确定</a-button
      >
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import useGlobalParametersStore from '@/store/modules/globalParameters';

const store = useGlobalParametersStore();
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    id: number; // 组织 | 职位 | 人员id
    type: number; // 1 组织 2 职位 3 人员
    data: any; // 数据
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'controlEditingEmit']);
const formData = ref({
  controlType: 1, // 1 不控编 2非严格控编 3严格控编
  nonStrict: {
    percentage: undefined, // 非严格控编百分比
    warning: undefined // 非严格控编预警
  },
  strict: {
    warning: undefined // 严格控编预警
  }
});

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      formData.value = cloneDeep(props.data);
    }
  }
);

// 保存
const handleOk = () => {
  const { controlType } = formData.value;
  let percentage, warning;

  if (controlType === 2) {
    percentage = formData.value.nonStrict.percentage;
    warning = formData.value.nonStrict.warning;
  } else if (controlType === 3) {
    warning = formData.value.strict.warning;
  }

  const temp = {
    id: props.id,
    controlType,
    percentage,
    warning
  };

  emit('update:visible', false);
  emit('controlEditingEmit', temp);
};

// 取消
const handleCancel = () => {
  emit('controlEditingEmit', null);
  emit('update:visible', false);
};
</script>

<style scoped lang="less">
.box {
  display: flex;
  .radio {
    width: 100px;
  }
  &-right {
    display: flex;
    section {
      display: flex;
      flex-direction: column;
      gap: 10px;
      &:first-child {
        margin-right: 20px;
      }
    }
  }
}
</style>
